<template>
  <div class="users-base-wrapper">
    <!-- <div class="module-name">受试者状态</div> -->
    <div class="details-layout">
      <el-row style="text-align: left; margin-bottom: 16px;">
        <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
      </el-row>
      <el-table :data="checkTypeList" :stripe="true" :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }" style="width: 100%">
        <el-table-column prop="typeName" label="核查类型" align="center">
        </el-table-column>
        <el-table-column prop="status" align="center" label="开启">
          <template slot-scope="scope">
            <div>
              <el-checkbox v-model="scope.row.status"></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="checkName" align="center" label="核查名称">
          <template slot-scope="scope">
            <el-input size="mini" placeholder="请输入" style="width: 180px" v-model="scope.row.checkName" maxlength="10" show-word-limit clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="roleId" align="center" label="角色">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.roleId" placeholder="请选择" style="width: 220px" clearable>
              <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name + '(' + item.code + ')'"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="tag" align="center" label="标签">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.tag" placeholder="请选择" style="width: 220px" clearable>
              <el-option v-for="item in tagList" :key="item.value" :value="item.value" :label="item.text"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>

import { mapActions } from 'vuex'

export default {
  name: 'users-manage',

  data() {
    return {
      checkTypeList: [],
      roleList: [],
      tagList: [{
        text: 'S', value: 'S'
      }, {
        text: 'D', value: 'D'
      }, {
        text: 'M', value: 'M'
      }, {
        text: 'P', value: 'P'
      }]
    }
  },
  mounted() {
    this.projectId = localStorage.getItem('sys-project-id') || ''
    this.getCheckTypeConfigList()
    this.getProjectRoleList()
  },

  methods: {
    ...mapActions('eCRFDesign', ['qryCheckTypeConfigList', 'editCheckTypeConfig']),
    ...mapActions('roleManage', ['getRoleDataAPI']),

    // 查询核查类型列表
    getCheckTypeConfigList() {
      const params = {
        projectId: this.projectId
      }
      this.qryCheckTypeConfigList({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          data.map((dItem, dIndex) => {
            dItem.status = !!dItem.status
          })
          this.checkTypeList = data
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 查询项目中配置的角色
    getProjectRoleList() {
      const params = {
        pageNo: 1,
        pageSize: 100,
        projectId: this.projectId
      }
      this.getRoleDataAPI({ params }).then(res => {
        const { data, code } = res
        if (code === 200) {
          this.roleList = data.records
        }
      })
    },

    // 保存
    handleSave() {
      const list = []
      this.checkTypeList.map((cItem, cIndex) => {
        const role = this.roleList.filter(item => item.id === cItem.roleId)
        let roleCode = ''
        if (role && role.length > 0) {
          roleCode = role[0].code
       }
        const obj = {
          id: cItem.id,
          typeName: cItem.typeName,
          status: cItem.status ? 1 : 0,
          roleId: cItem.roleId,
          roleCode: roleCode,
          checkName: cItem.checkName,
          sort: cItem.sort,
          tag: cItem.tag
        }
        list.push(obj)
      })
      const data = {
        projectId: this.projectId,
        edcCheckRequestList: list
      }

      this.editCheckTypeConfig({ data }).then(res => {
        const { code } = res
        if (code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.getCheckTypeConfigList()
        }
        this.loading = false
      })
    },

  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
